<style lang="less" rel="stylesheet/less" scoped>
    .book-ul{
        padding-bottom: 1.5rem;
    
        .book-item{
            padding: 0.2rem;align-items:center;border-bottom: 1px solid #bbbbbb;
            position: relative;
            .FengCheck {
                margin-right: 0.2rem;
                input {display: none;outline: none;}
                input + span {display: inline-block;width: 0.6rem;height: 0.6rem;overflow: hidden;}
                input[type="checkbox"] + span {background-size: cover;background-repeat: no-repeat;background-position: bottom left;}
                input[type="checkbox"]:checked + span{background-position: top left;}
            }
            .book-img{
                width: 30vw;
            }
            .book-info{
                margin-left: 0.3rem;
                span{
                    margin-right: 0.2rem;
                }
                .del-tab{
                    position: absolute;
                    top: 0.5rem;
                    right: 0.5rem;
                    border: 1.5px solid #c00;
                    border-radius: 50%;
                    color: #c00;
                    width: 0.5rem;
                    height: 0.5rem;
                    text-align: center;
                    line-height: 0.5rem;
                    font-size: 0.4rem;

                }
                .book-name{
                    font-size: 0.32rem;
                    font-weight: bold;
                }
                .book-user{
                    font-size: 0.3rem;
                    // color: #4cd658;
                }
                .book-score{
                    font-size: 0.3rem;
                    line-height: 0.6rem;
                    // span{
                    //     font-size: 0.34rem;
                    //     color: aqua;
                    //     font-style: italic;
                    //     line-height:0.8rem;
                    // }
                    .package{
                        padding: 0.2rem;
                        margin-left: 0.2rem;
                        font-style: normal;
                        color: #333333;
                    }   
                }
            }
        }
    }
    .package-footer{
        height: 1rem;
        background-color: #bbbbbb;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding:0 0.2rem;
        .money{
            color: #c00;
        }
        .look-now{
            background-color: #078301;
            height: 0.6rem;
            margin: 0.2rem;
            padding: 0 0.2rem;border-radius: 3px;
            outline: none;

        }

    }
</style>
<template>
    <div class="package">
        <ul class="box-direction book-ul">
            <li class="box-left book-item" v-for="(item,index) in bookinfo" :key="index">
                <label class="FengCheck"><input name="check" type="checkbox"><span :style="note"></span></label>
                <img :src="item.img" :alt="item.name" class="book-img">
                <ul class="box-direction book-info" >
                    <li class="del-tab">X</li>
                    <li class="book-name">{{ item.name }}</li>
                    <li class="book-user">{{ item.user }}</li>
                    <li class="book-score">评分:<span>{{ item.score }}</span></li>
                    <li><span>剩余册数:{{ item.inventory }}</span><span>累计借阅次数:{{ item.number }}</span></li>
                </ul>
            </li>
            
        </ul>
        <div class="box-between package-footer">
            <label class="FengCheck">
                <input name="check" type="checkbox">
                <span :style="note">全选</span>
            </label>
            <div class="money">运费：<span>￥5.00</span></div>
            <button class="look-now">立即借阅</button>
        </div>
    </div>
</template>

<script>
    import p3 from '../../assets/img/p3.jpg'
    import p1 from '../../assets/img/icon_checkbox.png'

    export default {
        name: '',
        //数据
        data() {
            return {
                note: {
                    backgroundImage: "url(" + require("../../assets/img/icon_checkbox.png") + ")",
                },
                bookinfo:[
                    {img:p3,name:'橘子不是唯一的水果',user:'珍妮特·温特森',score:'8.6',inventory:'5',number:'156'},
                    {img:p3,name:'橘子不是唯一的水果',user:'珍妮特·温特森',score:'8.6',inventory:'5',number:'156'},
                    ],
               

            }
        },
         //计算属性
        computed:{
           
        },
        //组件
        components: {},
        //初始化数据
        mounted() {
            
        },
        //方法
        methods: {
            
        },
        //监听数据变化
        watch: {
          '$route' (to, from) {
          }
        }
    }
</script>
